<script setup lang='ts'>
    import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref} from 'vue'
    onBeforeMount(()=>{
        console.log('onBeforeMount');               
    })
    onMounted(()=>{
        console.log('onMounted');               
    })
    onBeforeUpdate(()=>{
        console.log('onBeforeUpdate');               
    })
    onUpdated(()=>{
        console.log('onUpdated');               
    })
    onBeforeUnmount(()=>{
        console.log('onBeforeUnmount');               
    })
    onUnmounted(()=>{
        console.log('onUnmounted');               
    })
    const username = ref('')
</script>
       
<template>
    <p>{{ username }}</p>
       <input type="text" v-model="username"/>
</template>
       
<style scoped>
       
</style>